<template>
  <Form ref="addFrom" :model="editDevice" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem label="设备名称：" prop="name">
      <Input v-model="editDevice.name" placeholder="请输入设备名称"></Input>
    </FormItem>
    <FormItem v-if="isTeam" label="所属团队编号：" prop="name">
      <Input v-model="editDevice.team_id" disabled placeholder="请输入团队编号"></Input>
    </FormItem>
    <FormItem label="状态：" prop="state">
      <i-switch
          size="large"
          v-model="editDevice.state"
          @on-change="stateChange"
        >
          <span slot="open">启用</span>
          <span slot="close">停用</span>
        </i-switch>
    </FormItem>
    <FormItem>
      <div style="width:80%;margin:0 auto;">
        <Button type="primary" :loading="submit" @click="handleSubmit" long>
          <span v-if="!submit">确定创建</span>
          <span v-else>创建中...</span>
        </Button>
      </div>
    </FormItem>
  </Form>
</template>

<style lang="less" scoped>
.avator {
  height: 126px;
  width: 126px;
  float: left;
  img {
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 13px;
    height: 100px;
    width: 100px;
  }
}
</style>

<script>
import { getIsTeam } from '@/libs/util'

export default {
  name: 'addFrm',
  props: {
    nameRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur',
            type: 'string'
          }
        ]
      }
    },
    editDevice: {}
  },
  data () {
    return {
      isTeam: !getIsTeam(),
      submit: false
    }
  },
  computed: {
    rules () {
      return {
        name: this.nameRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.addFrom.validate((valid) => {
        if (valid) {
          this.submit = true
          this.$emit('edit-sumit', {
            id: this.editDevice.id,
            name: this.editDevice.name,
            team_id: this.editDevice.team_id,
            state: this.editDevice.state
          })
        } else {
          this.submit = false
        }
      })
    },
    stateChange (status) {
      this.editDevice.state = status
    },
    success () {
      // 创建成功重新初始化
      this.editDevice.name = ''
      this.editDevice.state = true
      this.submit = false
    },
    fail () {
      this.submit = false
    }
  }
}
</script>
